<template>
  <div>
    <div class="record-title">腹直肌治疗记录单</div>
    <div class="patient-info">
      <div class="info-row">
        <span class="info-item">
          患者姓名：<span class="underline">123</span>
        </span>
        <span class="info-item">
          性别：<span class="underline">123</span>
        </span>
        <span class="info-item">
          年龄：<span class="underline">123</span>
        </span>
      </div>
    </div>
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px" size="medium"
    @submit.native.prevent>
    <div class="table-container">
      <table class="table-layout center" style="margin-bottom: 50px;">
        <tbody>
          <tr>
            <td class="table-cell">治疗时间
            </td>
            <td class="table-cell" colspan="2">开始时间
            </td>
            <td class="table-cell" colspan="3">___年___月___日
            </td>
            <td class="table-cell" colspan="2">结束时间
            </td>
            <td class="table-cell" colspan="4">___年___月___日
            </td>
          </tr>
          <tr>
            <td class="table-cell">治疗方案
            </td>
            <td class="table-cell" colspan="7">
            </td>
            <td class="table-cell" colspan="4">第___疗程
            </td>
          </tr>
          <tr>
            <td class="table-cell" rowspan="4">盆底功能评估
            </td>
            <td class="table-cell" colspan="4">时间
            </td>
            <td class="table-cell" colspan="7">结果
            </td>
          </tr>
          <tr>
            <td class="table-cell" colspan="4">第一次评估 ___年___月___日
            </td>
            <td class="table-cell" colspan="7">基线：    微伏；I类肌：  级；II类肌：   级
            </td>
          </tr>
          <tr>
            <td class="table-cell" colspan="4">第一次评估 ___年___月___日
            </td>
            <td class="table-cell" colspan="7">基线：    微伏；I类肌：  级；II类肌：   级
            </td>
          </tr>
          <tr>
            <td class="table-cell" colspan="4">第一次评估 ___年___月___日
            </td>
            <td class="table-cell" colspan="7">基线：    微伏；I类肌：  级；II类肌：   级
            </td>
          </tr>
          <tr>
            <td class="table-cell" rowspan="21">治疗记录
            </td>
            <td class="table-cell">次数
            </td>
            <td class="table-cell" colspan="2">日期
            </td>
            <td class="table-cell" colspan="2">治疗方案
            </td>
            <td class="table-cell" colspan="2">电/磁刺激
            </td>
            <td class="table-cell">刺激强度
            </td>
            <td class="table-cell">放松基线
            </td>
            <td class="table-cell">收缩波幅
            </td>
            <td class="table-cell">确认签字
            </td>
          </tr>
          <tr>
            <td class="table-cell">1
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">2
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">3
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">4
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">5
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">6
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">7
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">8
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">9
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">10
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">11
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">12
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">13
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">14
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">15
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">16
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">17
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">18
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">19
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
          <tr>
            <td class="table-cell">20
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell" colspan="2">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-form>
  </div>
</template>
<script>
export default {
 name:'',
 data() {
    return {
    }
 },
 methods:{
 },
}
</script>
<style lang="scss" scoped>
.center {
  width: 80%;
  margin: 0 auto;
}

.record-title {
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.patient-info {
  text-align: center;
  margin-top: 20px;
}

.info-row {
  display: inline-block;
  padding-bottom: 15px;
}

.info-item {
  display: inline-block;
  margin: 0 20px;
  font-size: 16px;
  color: #333;
}

div.table-container {
  table.table-layout {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;

    td.table-cell {
      display: table-cell;
      height: 38px;
      border: 1px solid #333;
      font-size: 16px;
      overflow-wrap: break-word;
    }
  }
}
</style>
